<template>
  <view class="redeem">
    <view class="redeem-item flex align-center" v-for="item in courseList" :key="item.id">
      <image :src="item.course.image" class="course-img" mode="aspectFill"></image>
      <view class="course-right">
        <view class="title">{{item.course.name}}</view>
        <view class="btn" @click="redeemCourse(item)">兑换</view>
      </view>
    </view>
    <empty-hold v-if="courseList.length == 0"></empty-hold>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        courseList: [{
          "id": 1,
          "course_id": 1,
          "code": "8132JR",
          "course": {
            "id": 1,
            "type": 1,
            "name": "php是最好的编程语言",
            "category_id": 3,
            "tag_ids": "1",
            "teacher_id": 3,
            "image": "/assets/img/qrcode.png",
            "description": "",
            "is_charge": 1,
            "try_times": 1,
            "total_num": 0,
            "collection_count": 1,
            "avg_score": 4,
            "type_text": "Type 1",
            "video_time_text": "",
            "audio_time_text": "",
            "is_charge_text": "Is_charge 1",
            "is_hot_text": "",
            "is_new_text": "",
            "status_text": ""
          }
        }],
        code: ''
      };
    },
    onLoad(query) {
      this.code = query.code
      this.getCourses()
    },
    methods: {
      async getCourses() {
        const {
          data
        } = await this.$Api.getCourseByCode({
          course_code: this.code
        })
        if (data.length > 0) {
          this.courseList = data
        }
      },
      async redeemCourse(course) {
        const {code, msg} = await this.$Api.postCodeToCourse({
          course_code: course.code,
          course_code_id: course.id
        })
        if(code == 1) {
          uni.showToast({
            title: '兑换成功',
            icon: 'success'
          })
          setTimeout(() => {
            uni.navigateBack()
          }, 1500)
        } else {
          uni.showToast({
            title: msg,
            icon: 'none'
          })
        }
      }
    },
  }
</script>

<style lang="scss">
  page{
    background-color: #f7f7f7;
  }
.redeem{
  width: 750rpx;
  min-height: 100vh;
  padding: 30rpx;
  
  .redeem-item{
    background: #FFFFFF;
    border-radius: 12rpx;
    padding: 24rpx;
    margin-bottom: 30rpx;
    
    .course-img{
      width: 160rpx;
      height: 192rpx;
      border-radius: 12rpx;
      flex-shrink: 0;
      margin-right: 16rpx;
    }
    .course-right{
      height: 192rpx;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .title{
        font-size: 30rpx;
        font-weight: bold;
        color: #333333;
      }
      .btn{
        width: 160rpx;
        height: 60rpx;
        line-height: 60rpx;
        text-align: center;
        background: #7644FF;
        border-radius: 30rpx;
        color: #fff;
        font-size: 28rpx;
      }
    }
  }
}
</style>